// //获取元素
// const tbody=document.querySelector('tbody')
// //渲染函数
// function render(){
//     axios({
//         url:'/score/list'//接口地址不能大写
//     })
//     .then((result)=>{
//         console.log('result: ', result);
// const data=result.data.data
// // console.log('newdata: ', data);

// let str=''
// //遍历对象，要使用forin方法
// for (const key in data) {
//     //key是属性名的意思，对象的属性的访问方式，点语法，[]中括号的方式，key是变量,data[key]，数组的访问方式是XXX[下标]
//     // console.log(key)
//     str+=
//     `<tr>
//     <th>${key}</th>
//     <td>${data[key].name}    <input type="text"></td>
//     <td class='score'>${data[key].score[0]}    <input type="text"data-stu_id=${key} data-batch="1"></td>
//     <td class='score'>${data[key].score[1]}    <input type="text"data-stu_id=${key} data-batch="2"></td>
//     <td class='score'>${data[key].score[2]}    <input type="text"data-stu_id=${key} data-batch="3"></td>
//     <td class='score'>${data[key].score[3]}    <input type="text"data-stu_id=${key} data-batch="4"></td>
//     <td class='score'>${data[key].score[4]}    <input type="text"data-stu_id=${key} data-batch="5"></td>
// </tr>`
// }
// tbody.innerHTML=str

// inputblur()//失去焦点函数调用
//     })
// }
// //函数调用
// render()
// //给指定单元格绑定双击
// //因为数据是随机的，用委托
// tbody.addEventListener('dblclick',function(e){
//     //判断点击的是不是分数
//     //
//     if(e.target.tagName==='TD'&&e.target.classList.contains('score')){
//         // console.log('你点击对了')
//         e.target.querySelector('input').style.display='block'
//         e.target.querySelector('input').value=e.target.innerText
//         //设置input标签获得焦点
//         e.target.querySelector('input').focus()
//     }
// })
// //=======================================================输入框失去焦点事件，不能用事件委托，因为失去焦点，只有INPUT有
// //失去焦点的函数
// function inputblur(){
// const input=document.querySelectorAll('tbody input')
// console.log('input: ', input);
// input.forEach(input => {
//     input.addEventListener('blur',function(e){
//         console.log('你失去了焦点')
//         //获取input里面具体要拼接的参数，用deta-id自定义属性
//         const stu_id=e.target.dataset.stu_id
//         console.log('stu_id: ', stu_id);
//         const batch=e.target.dataset.batch
//         console.log('batch: ', batch);
//         const score=input.value
//         console.log('score: ', score);

//         axios({
//             url:'/score/entry',
//             method:'post',
//             data:{
//                 stu_id,
//                 batch,
//                 score
//             }
//         })
//         .then((result)=>{
//             console.log(result)
//             if(result.data.code===0){
//                 toastr.success(result.data.message)
//                 render()
//             }
//             else{
//                 toastr.warning(result.data.message)
//             }
//         })
//     })
// });

// }
//=============================================================================================================================================================

//=========================================================================================
const tbody=document.querySelector('tbody')
//渲染函数
function render(){
axios({
    url:'/score/list'
})
.then((result)=>{
console.log(result)
const data=result.data.data
console.log('data: ', data);
let str=''//定义一个空字符串用来凭借
//查看了数据类型是对象，对象的遍历需要用到forin
for (const key in data) {
    console.log('key: ', key);
    console.log('data[key].name: ', data[key].name);
    // data[key].name才是获取到那个对象
    console.log('data[key].score: ', data[key].score);
    //key是属性名
    //key是属性名的意思，对象的属性的访问方式，点语法，[]中括号的方式，key是变量,data[key]，数组的访问方式是XXX[下标]
str+=`<tr>
<th>${key}</th>
<td>${data[key].name}</td>
<td class='score'>    <input type="text" data-stu_id=${key} data-batch='1'>${data[key].score[0]}</td>
<td class='score'>    <input type="text" data-stu_id=${key} data-batch='2'>${data[key].score[1]}</td>
<td class='score'>    <input type="text" data-stu_id=${key} data-batch='3'>${data[key].score[2]}</td>
<td class='score'>    <input type="text" data-stu_id=${key} data-batch='4'>${data[key].score[3]}</td>
<td class='score'>    <input type="text" data-stu_id=${key} data-batch='5'>${data[key].score[4]}</td>
 </tr>`
    }
    tbody.innerHTML=str
    inputblur()//调用焦点失去函数
})
}
render()
//事件委托设置双击事件
//获取，当你获取到当前要获取的元素的父元素时，可以通过父元素获取
tbody.addEventListener('dblclick',function(e){
    //特定的输入框列才能双击
    if(e.target.tagName='TD'&&e.target.classList.contains('score')){
        console.log('你成功获取点击目标')
        //双击的时候value-当前td内容
// e.target.document.querySelector('input').style.display='block' 错误写法
const scoreinput= e.target.querySelector('input')
scoreinput.style.display='block'
console.log('scoreinput: ', scoreinput);
scoreinput.value=e.target.innerText
//双击之后直接获得焦点
scoreinput.focus()
    }
})
//输入框失去焦点，不能用事件委托，因为失去焦点，只有input事件才有
function inputblur(){
const input=document.querySelectorAll('tbody input')
console.log('input: ', input);
//得到的数据，需要遍历才能设置事件
input.forEach(input => {
    input.addEventListener('blur',function(e){
        console.log('你失去了焦点')
const stu_id=e.target.dataset.stu_id
const batch=e.target.dataset.batch
const score=e.target.value
        axios({
            url:'/score/entry',
            method:'post',
            data:{
//根据文档获得接口方法需要的参数
                stu_id,
                batch,
                score
            }
        })
        .then((result)=>{
            console.log(result)
            if(result.data.code===0){
                toastr.success('成功');
                render()
            }else{
                toastr.warning(result.data.message);
            }
        })
    })
});
}